<template>
  <ul class="tabs-wrap">
    <li
      v-for="(item, index) in props.tabsList"
      :key="index"
      class="tab-item"
      :class="{ active: activeName === item.typeCode }"
      @click="tabClick(item)"
    >
      {{ item.name }}({{ item.num }})
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
const emit = defineEmits(['tabClick']);
const store = useStore();
const props = defineProps({
  tabsData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  category: {
    type: String,
    default: '',
  },
  tabsList: {
    type: Array as any,
    default: () => [],
  },
});
const activeName = ref('assetVul');
const internalTabsList = ref(props.tabsList); // 创建一个内部的响应式变量
watch(
  () => props.category,
  (newVal) => {
    if (newVal) {
      activeName.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
const tabClick = (item) => {
  activeName.value = item.typeCode;
  emit('tabClick', activeName.value, item);
};
const getExposedTypes=async()=> {
      const { code, data = [] } = await store.dispatch(
        'attack/getExposedTypes'
      )
      if (code !== 0) {
        return
      }
      const updatedData = data.map((item) => ({ ...item, num: 0 }));
      internalTabsList.value = updatedData; // 使用内部的响应式变量


    }
</script>
<style lang="scss" scoped>
.tabs-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 9;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  .tab-item {
    cursor: pointer;
    font-size: 16px;
    padding: 16px 24px;
    border-bottom: 2px solid transparent;
    // margin-left: 24px;
    &.active {
      color: $-v-color-primary;
      border-bottom: 2px solid $-v-color-primary;
      font-weight: 600;
    }
    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
